/* App container and responsive layout */
.App {
  width: 100%;
  min-height: 100vh;
  background-color: var(--background-color);
}

/* Container for different screen sizes */
.container {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Small devices (phones) */
@media (max-width: 576px) {
  .container {
    max-width: 100%;
    padding: 0 12px;
  }
}

/* Medium devices (tablets) */
@media (min-width: 577px) and (max-width: 768px) {
  .container {
    max-width: 720px;
    padding: 0 16px;
  }
}

/* Large devices (desktops) */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 960px;
    padding: 0 20px;
  }
}

/* Extra large devices (large desktops) */
@media (min-width: 1025px) {
  .container {
    max-width: 1200px;
    padding: 0 24px;
  }
}

/* Full width container */
.container-fluid {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Utility classes for responsive design */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
